import React,{useEffect, useState} from 'react'
import { IRouteComponentProps, useDispatch, useSelector } from "umi";
import './tag.less'
import moment from 'moment'
const Tag:React.FC<IRouteComponentProps>=(props:any)=> {
    console.log(props.match.params.tag,'...props');
    let [index,setIndex]=useState(0);
    let state = useSelector(state => state.index)
    let dispatch = useDispatch()
    useEffect(() => {
        dispatch({
            type: 'knowledge/getClassify'
        })
        dispatch({
            type: 'knowledge/getArticle'
        })
        dispatch({
            type: 'tag/getTagList'
        })
    }, [])
    console.log(state,'...state');
    
    moment.defineLocale('zh-cn', {
        relativeTime: {
            future: '%s内',
            past: '%s前',
            s: '几秒',
            m: '1 分钟',
            mm: '%d 分钟',
            h: '1 小时',
            hh: '%d 小时',
            d: '1 天',
            dd: '%d 天',
            M: '1 个月',
            MM: '%d 个月',
            y: '1 年',
            yy: '%d 年'
        },
    });
    return (
        <div className='Tag'>
            <div className='mainLeft'>
                <div className='mLeftTop'>
                    <p>与<i></i>标签有关的文章</p>
                    <p>共搜索到<i></i>篇</p>
                <div className='mLeftCenter'>
                    <p>文章标签</p>
                    <div>
                        {
                            state.tag.tagList && state.tag.tagList.map((item:any,index:number)=>(
                                <p key={item.id}>{item.label}</p>
                            ))
                        }
                    </div>

                </div>
                    <p>文章标签</p>
                </div>
                <div className='mLeftBottom'>
                </div>
            </div>
            <div className='mainRight'>
                <div className='mRightTop'>
                    <p>推荐阅读</p>
                    {
                        state.knowledge.articleList && state.knowledge.articleList.map((item: any) => (
                            <div key={item.id}>
                                <span>{item.title}</span>·<span>大约{moment(item.createAt, "YYYYMMDD").fromNow()}</span>
                            </div>
                        ))
                    }
                </div>
                <div className='mRightBottom'>
                    <p>文章分类</p>
                    {
                        state.knowledge.classifyList && state.knowledge.classifyList.map((item: any) => (
                            <div key={item.id}>
                                <span>{item.label}</span>
                                <span>共计{item.articleCount}篇文章</span>
                            </div>
                        ))
                    }
                </div>
            </div>
        </div>
    )
}
export default Tag